<template>
	<div>
		<div class="text-xl">【基本数据信息】</div>
		<div ref="target" class="w-full h-full flex text-center items-center text-2xl">
        <div class="box1">
          <CountTo :value="articleTotalCount"></CountTo>
          <span>文章数</span>
        </div>
          <div class="box1">
          <CountTo :value="categoryTotalCount"></CountTo>
          <span>分类数</span>
        </div>
        <div class="box1">
          <CountTo :value="tagTotalCount"></CountTo>
          <span>标签数</span>
        </div>
    </div>
	</div>
</template>
<script setup>
import { getBaseStatisticsInfo } from '@/api/admin/dashboard'
import CountTo from '@/components/CountTo.vue'
import { ref } from 'vue'
// 文章总数，默认值为 0
const articleTotalCount = ref(0)
// 分类总数
const categoryTotalCount = ref(0)
// 标签总数
const tagTotalCount = ref(0)

// 发送请求获取文章、分类、标签以及pv总访问量数据
const getStatisticsInfo = async () => {
  const res = await getBaseStatisticsInfo()
  if (res.success) {
    articleTotalCount.value = res.data.articleTotalCount
    categoryTotalCount.value = res.data.categoryTotalCount
    tagTotalCount.value = res.data.tagTotalCount
  }
}

getStatisticsInfo()


</script>
<style scoped>

@keyframes myfirst {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes myfirst2 {
  to {
    transform: rotate(360deg);
  }
}


.box1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 150px;
  height: 150px;
  line-height: 100%;
  margin: 0 auto;
  font-size: 20px;
  color: #fff;
  .span {
    font-size: 14px;
    line-height: 100%;
  }
}
.box1:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  background: url(@/assets/visualization/img1.png) center center;
  border-radius: 100px;
  background-size: 100% 100%;
  left: 0;
  top: 0;
  opacity: .5;
  animation: myfirst2 10s linear infinite;
}
.box1:after {
  position: absolute;
  width: 86%;
  background: url(@/assets/visualization/img2.png) center center;
  border-radius: 100px;
  background-size: 100% 100%;
  height: 86%;
  content: "";
  left: 7%;
  top: 7%;
  opacity: .5;
  animation: myfirst 10s linear infinite;
}

</style>
